// const back = document.querySelector('.back')
// back.addEventListener('click', function () {
//   //   console.log(111)
//   location.href = './index 1.html'
// })
const txt = document.querySelector('.text')
const search = document.querySelector('[type="search"]')
const hisList = document.querySelector('.his-list')

// 获取本地的数据
let itemsArr = JSON.parse(localStorage.getItem('goodstype')) || []
// console.log(itemsArr)
function render() {
  const newArr = itemsArr
    .map(ele => {
      return `
    <div class="his-item">
      <div class="history-button">${ele}</div>
    </div>
    `
    })
    .join('')
  // 如果本地有数据的话，就一开始显示出来
  if (localStorage.getItem('goodstype')) {
    document.querySelector('.history').style.display = 'block'
  }
  hisList.innerHTML = newArr
}
render()
// 新增浏览记录  并发送请求获取后台数据
txt.addEventListener('click', async function () {
  // console.log(11)
  if (!search.value.trim()) return
  document.querySelector('.history').style.display = 'block'
  itemsArr.unshift(search.value.trim())
  // 保存到本地
  // console.log(itemsArr, '保存')
  localStorage.setItem('goodstype', JSON.stringify(itemsArr))
  // 渲染到页面
  render()
  // 发送请求
  const { data: res } = await axios.get('/goods/list', {
    params: {
      sortType: search.value,
      sortPrice: search.value,
      categoryId: search.value,
      goodsName: search.value,
      sortType: search.value,
      page: search.value
    }
  })
  console.log(res)
})

// 删除本地的记录
const del = document.querySelector('.his-head .iconfont')
del.addEventListener('click', function () {
  // 隐藏记录
  document.querySelector('.history').style.display = 'none'
  // 数组清空
  itemsArr = []
  // console.log(itemsArr, '删除后')
  // 删除本地记录
  localStorage.removeItem('goodstype')
  render()
})
